<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/jquery-labelauty.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<title>增加药物</title>
		<style>
			.wrapper-dropdown-3 {
				/* Size and position */
				position: relative;
				width: 100%;
				/* Styles */
				background: #fff;
				border-radius: 0px;
				cursor: pointer;
				outline: none;
			}
			
			.wrapper-dropdown-3:after {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				right: 15px;
				top: 50%;
				margin-top: -3px;
				border-width: 6px 6px 0 6px;
				border-style: solid;
				border-color: #8aa8bd transparent;
			}
			
			.wrapper-dropdown-3 .dropdown {
				/* Size & position */
				position: absolute;
				top: 140%;
				left: 0;
				right: 0;
				/* Styles */
				background: white;
				border-radius: inherit;
				border: 1px solid rgba(0, 0, 0, 0.17);
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
				font-weight: normal;
				-webkit-transition: all 0.5s ease-in;
				-moz-transition: all 0.5s ease-in;
				-ms-transition: all 0.5s ease-in;
				-o-transition: all 0.5s ease-in;
				transition: all 0.5s ease-in;
				list-style: none;
				/* Hiding */
				opacity: 0;
				pointer-events: none;
				z-index: 999;
			}
			
			.wrapper-dropdown-3 .dropdown:after {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				bottom: 100%;
				right: 15px;
				border-width: 0 6px 6px 6px;
				border-style: solid;
				border-color: #fff transparent;
			}
			
			.wrapper-dropdown-3 .dropdown:before {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				bottom: 100%;
				right: 13px;
				border-width: 0 8px 8px 8px;
				border-style: solid;
				border-color: rgba(0, 0, 0, 0.1) transparent;
			}
			
			.wrapper-dropdown-3 .dropdown li a {
				display: block;
				padding: 10px;
				text-decoration: none;
				color: #000;
				border-bottom: 1px solid #e6e8ea;
				box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
				-webkit-transition: all 0.3s ease-out;
				-moz-transition: all 0.3s ease-out;
				-ms-transition: all 0.3s ease-out;
				-o-transition: all 0.3s ease-out;
				transition: all 0.3s ease-out;
			}
			
			.wrapper-dropdown-3 .dropdown li i {
				float: right;
				color: inherit;
			}
			
			.wrapper-dropdown-3 .dropdown li:first-of-type a {
				border-radius: 7px 7px 0 0;
			}
			
			.wrapper-dropdown-3 .dropdown li:last-of-type a {
				border: none;
				border-radius: 0 0 7px 7px;
			}
			/* Hover state */
			
			.wrapper-dropdown-3 .dropdown li:hover a {
				background: #f3f8f8;
			}
			/* Active state */
			
			.wrapper-dropdown-3.active .dropdown {
				opacity: 1;
				pointer-events: auto;
			}
			/* No CSS3 support */
			
			.no-opacity .wrapper-dropdown-3 .dropdown,
			.no-pointerevents .wrapper-dropdown-3 .dropdown {
				display: none;
				opacity: 1;
				/* If opacity support but no pointer-events support */
				pointer-events: auto;
				/* If pointer-events support but no pointer-events support */
			}
			
			.no-opacity .wrapper-dropdown-3.active .dropdown,
			.no-pointerevents .wrapper-dropdown-3.active .dropdown {
				display: block;
			}
			
			.mui-table-view-cell:after {
				left: 0px;
			}
			
			.huangzi {
				color: #FCB565 !important;
			}
			
			.mui-input-row label~input {
				border: 0;
				width: 70%;
			}
			
			.yaoji {
				border-bottom: 1px solid #e3e3e3;
			}
			
			#jiliang {
				float: left;
				width: 35%;
				margin-bottom: 0;
				padding-left: 0;
				padding-top: 25px;
			}
			
			#dd2 {
				width: 30%;
				float: right;
				top: 15px;
			}
			
			.yaowu2 {
				overflow: inherit;
				z-index: 9;
			}
			
			.mui-input-row label {
				width: 30%;
				padding: 21px 10px;
			}
			
			.mui-content {
				background: #FFFFFF;
				font-size: 15px;
			}
			
			input,
			textarea {
				font-size: 15px;
			}
			
			.yaoji label {
				width: 40%;
				padding: 11px 10px;
			}
			
			.yaoji input {
				width: 60% !important;
			}
			
			.mui-table-view-cell {
				padding: 8px 10px;
			}
			
			.time {
				border-bottom: 1px solid #e3e3e3;
			}
			
			.fuwutime:after {
				height: 0;
			}
			
			.fuyaojinji {
				margin-top: 10px;
			}
			
			textarea {
				margin-top: 10px;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				margin: -11px -10px;
			}
			
			.fuyaojinji span {
				margin-left: 10px;
			}
			
			.mui-btn-warning {
				line-height: 0.5;
			}
			
			#addtime .mui-icon {
				color: red;
				margin-top: 10px;
			}
			
			#addtixing span {
				color: #45d0d5;
			}
			.addtixing{
				padding-top: 20px !important;
			}
			.mui-icon-minus:before,
			.mui-icon-plus:before {
				font-size: 28px;
			}
			.set_time{
				 width: 50% !important; 
				 margin-bottom: 0 !important; 
				 border: 0 !important; 
				 padding: 10px 0px !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">增加药物</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="mui-input-row yaoji">
					<label>药物名称：</label>
					<input type="text" id="drug_name" placeholder="请填写药物名称">
				</div>
				<!--<section class="main">
					<div class="wrapper-demo">
						<div id="dd" class="wrapper-dropdown-3 time" tabindex="1">
							<span>次数</span>
							<ul class="dropdown">
								<li>
									<a><i class="icon-envelope icon-large"></i>3</a>
								</li>
								<li>
									<a><i class="icon-truck icon-large"></i>2</a>
								</li>
								<li>
									<a><i class="icon-truck icon-large"></i>1</a>
								</li>
							</ul>
						</div>
					</div>
				</section>-->
				<div class="mui-input-row yaowu2">
					<label>剂量：</label>
					<input type="text" id="jiliang" placeholder="请填写剂量">
					<section class="main">
						<div class="wrapper-demo">
							<div id="dd2" class="wrapper-dropdown-3" tabindex="1">
								<span id="drug_dw">mg</span>
								<ul class="dropdown">
									<li>
										<a><i class="icon-envelope icon-large"></i>mg</a>
									</li>
									<li>
										<a><i class="icon-truck icon-large"></i>ml</a>
									</li>
									<li>
										<a><i class="icon-truck icon-large"></i>ug</a>
									</li>
									
								</ul>
							</div>
						</div>
					</section>
				</div>
				<div style="margin-top: 60px;">
					<ul class="mui-table-view" id="messageUL" data-dateType="time">
						<!--<li class="mui-table-view-cell">
							<a class="" id="addtime">
								<input type="text" data-dateType="time" class="mui-input-clear set_time" placeholder="设置提醒时间" readonly="readonly">
								<span class="mui-icon mui-icon-minus mui-pull-right" id="split_span"></span>
							</a>
						</li>-->
					</ul>

					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a class="addtixing" id="addtixing">
								增加提醒<span class="mui-icon mui-icon-plus mui-pull-right" id="add_span"></span>
							</a>
						</li>
					</ul>
				</div>
				<div class="mui-input-row fuyaojinji">
					<span>服药禁忌</span>
					<textarea id="illmiaoshu" rows="5"></textarea>
				</div>
			</div>
			<div class="mui-content-padded">
				<button id='queding' class="mui-btn mui-btn-block mui-btn-warning" type="submit">确定</button>
			</div>

		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/xiangyingshi.js"></script>
		<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>

		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/getDate.js" ></script>
		<script type="text/javascript" src="../plugs/moment/moment.min.js" ></script>
		<!--<script type="text/javascript" src="../js/qs/qs.notice.js" ></script>-->
		<script>
			var timeArray=[];
			mui.plusReady(function() {
				if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
					// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
					document.querySelector("header").style.height = topoffset;
					document.querySelector("header").style.paddingTop = "20px";
					document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = topoffset;
				}
				// 加载完毕后关闭等待框，并展示页面
				var currentView = plus.webview.currentWebview();
				currentView.show('slide-in-right', 200);
				plus.nativeUI.closeWaiting();
				
				
				//弹出服药时间
				//mui("#messageUL").getDateInfo();
				//弹出提前时间	
				mui(".mui-table-view").on("tap","input",function(e){
					var t=new Date().getMinutes();
					var self =$(this);
					plus.nativeUI.pickTime( function(e){
						var d=e.date;
						alert("选择的时间："+moment(d).format('HH:mm'));
						self.val(moment(d).format('HH:mm'));
						timeArray.push(moment(d).format('HH:mm'));
					},function(e){
						alert( "未选择时间："+e.message );
					},{
						is24Hour:true,
						title:"提前时间",
						time:t
					});
				});

				if(plus.os.name == "Android") {
					//安卓系统的服药提醒
					var setcalendar = function() {
						mui.toast('功能加载中,请稍后', {
							type: 'div',
							duration: 1000
						});
					};
					var deletecalendar = function() {
						mui.toast('功能加载中,请稍后', {
							type: 'div',
							duration: 1000
						});
					};
					var calanderURL = 'content://com.android.calendar/calendars',
						eventsURL = 'content://com.android.calendar/events',
						ContentValues = plus.android.importClass("android.content.ContentValues"),
						Uri = plus.android.importClass('android.net.Uri'),
						ContentUris = plus.android.importClass('android.content.ContentUris'),
						Calendar = plus.android.importClass('java.util.Calendar'),
						main = plus.android.runtimeMainActivity(),
						userCursor = plus.android.invoke(main.getContentResolver(), 'query', Uri.parse(calanderURL), null, null, null, null),
						userCursor_count = plus.android.invoke(userCursor, 'getCount'),
						TimeZone = plus.android.importClass('java.util.TimeZone'),
						TimeZone_str = plus.android.invoke(TimeZone.getDefault(), 'getID');
					setcalendar = function(title, description, date_str) {
						if(userCursor_count <= 0) { //如果没有日历账户
							var account = new ContentValues(),
								buildUpon = plus.android.invoke(Uri.parse(calanderURL), 'buildUpon'),
								CalendarContract = plus.android.importClass('android.provider.CalendarContract');
							plus.android.invoke(buildUpon, 'appendQueryParameter', CalendarContract.CALLER_IS_SYNCADAPTER, 'true');
							plus.android.invoke(buildUpon, 'appendQueryParameter', 'account_name', 'someone@something.com');
							plus.android.invoke(buildUpon, 'appendQueryParameter', 'account_type', 'com.android.exchange');
							//设置账户信息
							account.put('name', 'someone');
							account.put('account_name', 'someone@something.com');
							account.put('account_type', 'com.android.exchange');
							account.put('calendar_displayName', 'someone_calendar');
							account.put('visible', 1);
							account.put('calendar_color', '-9206951');
							account.put('calendar_access_level', '700');
							account.put('sync_events', 1);
							account.put('calendar_timezone', TimeZone_str);
							account.put('ownerAccount', 'someone@something.com');
							account.put('canOrganizerRespond', 0);
							//保存账户信息
							plus.android.invoke(main.getContentResolver(), 'insert', plus.android.invoke(buildUpon, 'build'), account);
							//重新定义userCursor
							userCursor = plus.android.invoke(main.getContentResolver(), 'query', Uri.parse(calanderURL), null, null, null, null);
							//重新定义userCursor_count
							userCursor_count++;
						}
						plus.android.invoke(userCursor, 'moveToLast');
						var calId = plus.android.invoke(userCursor, 'getString', plus.android.invoke(userCursor, 'getColumnIndex', '_id')),
							events = new ContentValues(),
							mCalendar = Calendar.getInstance(),
							date = date_str.split(/\s{1}|:|-/g);
//						plus.android.invoke(mCalendar, 'set', Calendar.YEAR, ~~date[0]);
//						plus.android.invoke(mCalendar, 'set', Calendar.MONTH, ((~~date[1]) - 1));
//						plus.android.invoke(mCalendar, 'set', Calendar.DATE, ~~date[2]);
//						plus.android.invoke(mCalendar, 'set', Calendar.HOUR_OF_DAY, ~~date[3]);
//						plus.android.invoke(mCalendar, 'set', Calendar.MINUTE, ~~date[4]);
						var start = plus.android.invoke(plus.android.invoke(mCalendar, 'getTime'), 'getTime'),
							end = plus.android.invoke(plus.android.invoke(mCalendar, 'getTime'), 'getTime');
						//设置日历事件
						events.put('title', title);
						events.put('description', description);
						events.put('calendar_id', calId);
						events.put('dtstart', start);
						events.put('dtend', end);
						events.put('hasAlarm', 2);
						events.put('eventTimezone', TimeZone_str);
						events.put('RRULE','FREQ=DAY;COUNT=1;');
						
						var newEvent = plus.android.invoke(main.getContentResolver(), 'insert', Uri.parse('content://com.android.calendar/events'), events);
						var id = plus.android.invoke(newEvent, 'getLastPathSegment');
						var values = new ContentValues();
						values.put('event_id', id);
						values.put('minutes', '0');
						values.put('method', '2');
						//plus.android.invoke(main.getContentResolver(), 'insert', Uri.parse('content://com.android.calendar/reminders'), values);
						mui.toast(title+'设置提醒成功');
					}
					deletecalendar = function(title) {
						if(userCursor_count <= 0) { //如果没有日历账户
							var account = new ContentValues(),
								buildUpon = plus.android.invoke(Uri.parse(calanderURL), 'buildUpon'),
								CalendarContract = plus.android.importClass('android.provider.CalendarContract');
							plus.android.invoke(buildUpon, 'appendQueryParameter', CalendarContract.CALLER_IS_SYNCADAPTER, 'true');
							plus.android.invoke(buildUpon, 'appendQueryParameter', 'account_name', 'someone@something.com');
							plus.android.invoke(buildUpon, 'appendQueryParameter', 'account_type', 'com.android.exchange');
							//设置账户信息
							account.put('name', 'someone');
							account.put('account_name', 'someone@something.com');
							account.put('account_type', 'com.android.exchange');
							account.put('calendar_displayName', 'someone_calendar');
							account.put('visible', 1);
							account.put('calendar_color', '-9206951');
							account.put('calendar_access_level', '700');
							account.put('sync_events', 1);
							account.put('calendar_timezone', TimeZone_str);
							account.put('ownerAccount', 'someone@something.com');
							account.put('canOrganizerRespond', 0);
							//保存账户信息
							plus.android.invoke(main.getContentResolver(), 'insert', plus.android.invoke(buildUpon, 'build'), account);
						}
						//定义EventCursor用于删除
						var userCursor2 = plus.android.invoke(main.getContentResolver(), 'query', Uri.parse(eventsURL), null, null, null, null);

						deleteitem = title;
						plus.android.invoke(userCursor2, 'moveToFirst');
						while(!plus.android.invoke(userCursor2, 'isAfterLast')) {
							var eventTitle = plus.android.invoke(userCursor2, "getString", plus.android.invoke(userCursor2, 'getColumnIndex', 'title'));
							if(title == eventTitle) {
								var id = plus.android.invoke(userCursor2, 'getInt', plus.android.invoke(userCursor2, 'getColumnIndex', '_id'));
								var deleteUri = ContentUris.withAppendedId(Uri.parse(eventsURL), id);
								var rows = plus.android.invoke(main.getContentResolver(), "delete", deleteUri, null, null);
								if(rows == -1) {
									//事件删除失败
									mui.toast("删除失败");
									return;
								}
								mui.toast("删除成功");

							}
							plus.android.invoke(userCursor2, 'moveToNext');
						}
					}
					
					
					mui(".mui-table-view").on("tap", ".tq_text", function(e) {
						var now = new Date();
						var dtPicker = new mui.DtPicker({
							"type": "time",
							"customData": {
								"i": [{
										"text": "00",
										"value": "00"
									},
									{
										"text": "15",
										"value": "15"
									},
									{
										"text": "30",
										"value": "30"
									},
									{
										"text": "45",
										"value": "45"
									}
								]
							}
						});
						var dtPicker = new mui.DtPicker();
						

						dtPicker.show(function(rs) {
							setcalendar('设置服药提醒', '您设置了服药提醒，请吃药！', rs.text);
							//deletecalendar('测试提醒标题');
							dtPicker.dispose();
						});
					});
					
				} else if(plus.os.name == "iOS") {
					mui(".mui-table-view").on("tap", ".text", function(e) {
						var dtPicker = new mui.DtPicker();
						dtPicker.show(function(rs) {
							//setcalendar('测试提醒标题', '测试提醒内容', rs.text);
							//deletecalendar('测试提醒标题');
							dtPicker.dispose();
						});
					});
				}

			});

			$("#add_span").click(function(e) {
				//var html = '<li class="mui-table-view-cell"><div class="" id="addtime"><span class="text">设置服药时间</span><span class="mui-icon mui-icon-minus mui-pull-right" id="split_span"></span></div></li>';
				var html='<li class="mui-table-view-cell"><a class="" id="addtime"><input type="text" data-dateType="time" class="mui-input-clear set_time" placeholder="设置提醒时间" readonly="readonly" value="设置服药提醒时间"><span class="mui-icon mui-icon-minus mui-pull-right" id="split_span"></span></a></li>'
				$("#messageUL").append(html);
			});
			mui(".mui-table-view").on("tap", "#split_span", function(e) {
				$(this).parent().parent().remove();
			});

			$("#queding").click(function(e) {
				var drugname = $("#drug_name").val();
				var drugnum= $("#jiliang").val();
				var drugdw=$("#drug_dw").text().trim();
				if(drugname==""||drugname.length==0){
					mui.toast("药品名称不可以为空");
					return false;
				}
				if(drugnum==""||drugnum.length==0){
					mui.toast("请填写药品数量");
					return false;
				}
				
				var drugtx = timeArray;
				var drugMessage = {};
				var drugMessageArray=[];
				if(localStorage.getItem("drugmessage")){
					drugMessageArray=JSON.parse(localStorage.getItem("drugmessage"));
				}
				if(drugtx.length==0){
					mui.toast("请设置提醒时间");
					return false;
				}
				drugMessage={
					drugname:drugname,
					drugdw:drugnum+drugdw,
					drugtx:drugtx,
					isopen:"false"
				}
				console.log(JSON.stringify(drugMessage));
				drugMessageArray.push(drugMessage);
				for(var i=0;i<drugMessageArray.length;i++){
					console.log(JSON.stringify(drugMessageArray[i]));
				}
				localStorage.setItem("drugmessage",JSON.stringify(drugMessageArray));
				mui.back();
			});

			/*下拉选择框*/
			function DropDown(el) {
				this.dd = el;
				this.placeholder = this.dd.children('span');
				this.opts = this.dd.find('ul.dropdown > li');
				this.val = '';
				this.index = -1;
				this.initEvents();
				this.opts2 = this.dd.find('ul.dropdown>li>a');
			}
			DropDown.prototype = {
				initEvents: function() {
					var obj = this;
					obj.dd.on('click', function(event) {
						$(this).toggleClass('active');
						return false;
					});
					obj.opts.on('click', function() {
						var selectItem = '';
						var opt = $(this);
						obj.val = opt.text(); //获取value值
						obj.index = opt.index();
						obj.id = opt.attr("id"); //获取ID值
						obj.placeholder.text(obj.val);
						var item = obj.val.trim();
					});

				},
				getValue: function() {
					return this.val;
				},
				getIndex: function() {
					return this.index;
				}
			}

			$(function() {
				var dd = new DropDown($('#dd'));
				var dd = new DropDown($('#dd2'));
				$(document).click(function() {
					// all dropdowns
					$('.wrapper-dropdown-3').removeClass('active');
				});
			});
		</script>
	</body>

</html>